<template>
	<view>
		<view class="top_tarbar">
			<view :class="[{active: index == activeIndex},'top_tarbar_item']" v-for="(item, index) in topTarBarList" :key="item.id"
			 @tap="checkTarbar(item,index)">
				{{item.info}}
				<view :class="[{arrow_c: item.arrow},{click0: item.arrowStatus == 0},{click1: item.arrowStatus == 1},{click2: item.arrowStatus == 2}]"></view>
			</view>
		</view>
		<view class="two_col_good_list_c">
			<TwoColGoodList :twoColGoodList="goodList"></TwoColGoodList>
		</view>
		<view class="bottomText" v-if="isHaveMore">
			---下拉刷新更多---
		</view>
		<view class="noMoreInfo" v-else>
			---没有更多数据---
		</view>
	</view>
</template>

<script>
	import request from "../../../api/request.js"
	import TwoColGoodList from "../../../components/TwoColGoodList.vue"
	export default {
		data() {
			return {
				// 当前点击的active
				activeIndex: 0,
				// 页面请求的开头
				start: 1,
				limit: 10,
				// 展示的商品列表
				goodList: [],
				// 当前请求的数据总和
				total: 0,
				// 计算一下是否还可以加载更多
				isHaveMore: true,
				// 请求数据的参数
				paramsData: {
					categoryId: "1308340066231906306",
					isDesc: '',
					sortBy: ''
				},
				// tarbar列表数据
				topTarBarList: [{
						id: 0,
						info: '新品',
						arrow: false
					},
					{
						id: 2,
						info: '销量',
						arrow: true,
						arrowStatus: 0
					},
					{
						id: 3,
						info: '价格',
						arrow: true,
						arrowStatus: 0
					},
					{
						id: 4,
						info: '筛选',
						arrow: false
					},
				],
				// 
			};
		},

		methods: {
			// 请求商品数据
			async requestGoodList() {
				const res = await request({
					url: `/product/findProductList/${this.start}/${this.limit}`,
					method: "POST",
					data: this.paramsData
				});
				this.total = res.data.data.total;
				this.goodList.push(...res.data.data.rows)
				this.isHaveMore = Math.ceil(this.total / this.limit) > this.start;
			},
			// tarbar点击
			checkTarbar(item, index) {
				this.goodList = [];
				this.start = 1;

				// 遍历其他的有被选中的箭头属性，将其复原。
				// 判断当前点击的按钮和上次点击的按钮是否相同
				if (this.activeIndex !== index) {
					this.activeIndex = index;
					this.topTarBarList.forEach(item => {
						if(item.hasOwnProperty("arrowStatus")) {
							item.arrowStatus = 0
						}
						
					})

				}
				
				if (item.hasOwnProperty('arrowStatus')) {
					if (item.arrowStatus < 2) {
						this.topTarBarList[index].arrowStatus++
					} else {
						this.topTarBarList[index].arrowStatus = 1
					}
				}

				// 判断index值知道那个被点击，请求相应的数据。
				switch (index) {
					case 0:
					case 3:
						this.paramsData.isDesc = 1;
						this.paramsData.sortBy = '';
						this.requestGoodList();
						break;
					case 1:
						if (item.arrowStatus == 1) {
							this.paramsData.isDesc = 1;
							this.paramsData.sortBy = 'sale';
						} else if (item.arrowStatus == 2) {
							this.paramsData.isDesc = 0;
							this.paramsData.sortBy = 'sale';
						}
						this.requestGoodList();
						break
					case 2:
						if (item.arrowStatus == 1) {
							this.paramsData.isDesc = 1;
							this.paramsData.sortBy = 'price';
						} else if (item.arrowStatus == 2) {
							this.paramsData.isDesc = 0;
							this.paramsData.sortBy = 'price';
						}
						this.requestGoodList();
						break;
				}
			},

			onReachBottom() {
				this.start++;
				if (this.isHaveMore) {
					this.requestGoodList();
				}
			},
			onPullDownRefresh() {
				this.goodList = [];
				this.start = 1;
				this.requestGoodList();
			}
		},
		async onLoad(option) {
			// 获取传过来的optionid;
			this.paramsData.categoryId = option.categoryId;
			const res = this.requestGoodList();
		},
		components: {
			TwoColGoodList
		},
		computed: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.top_tarbar {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		z-index: 10;
		height: 76rpx;
		width: 100%;
		margin-bottom: 30rpx;
		line-height: 76rpx;
		background-color: rgb(53, 78, 68);
		color: #fff;
		display: flex;

		.top_tarbar_item {
			position: relative;
			text-align: center;
			flex: 1;

			&.active {
				color: #dd524d;
			}

			.arrow_c {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				height: 50rpx;
				width: 27rpx;
				background-repeat: no-repeat;
				background-size: 81rpx 50rpx;
				background-image: url(../../../static/image/jiantou.png);

				&.click0 {
					background-position: -0rpx 0;
				}

				&.click1 {
					background-position: -27rpx 0;
				}

				&.click2 {
					background-position: -54rpx 0;
				}
			}
		}
	}

	.two_col_good_list_c {
		margin-top: 30rpx;
		padding-top: 76rpx;
	}

	.bottomText,
	.noMoreInfo {
		width: fit-content;
		margin: auto;
	}
</style>
